<template>
  <div>
    <el-row>
      <!-- <el-button size="mini" type="info" @click="doprintsee">打印预览</el-button> -->
      <el-button size="mini" type="success" @click="doprint">打印</el-button>
    </el-row>
    <!-- {{tableData}} -->
    <div v-show="false">
      <div id="printrecord2">
        <!-- <div v-for="item in tableData2" :key="item" 650>
          <p align="center" style="font-size:24px;margin:60px 0 30px 0;">人员参加培训记录</p>
          <el-table :data="item" :cellStyle="rowStyle" :headerCellStyle="tableHeaderColor" style="width: 599px; border:1px solid #333;">
            <el-table-column align="center" width="110px" prop="hash.pre_begintime" label="培训时间"></el-table-column>
            <el-table-column align="center" width="377.6px" prop="hash.tcontent" label="培训内容">
            </el-table-column>
            <el-table-column align="center" width="110px" prop="hash.has_cert" label="是否有证"></el-table-column>
          </el-table>
          <div style="height:50px;"></div>
        </div> -->
        <p style="display:flex;justify-content:flex-end">
          <span style="margin-right:20px;font-size:16px">JBR/QR18-1B</span>
        </p>
        <table width="100%">
          <thead>
            <tr style="border:0">
              <th colspan="4" style="border:0;height:50px;line-height:50px;font-size:20px;text-align:center;font-weight:600;color:#333">人员参加培训记录</th>
            </tr>
            <tr>
              <th style="width:180px">培训时间</th>
              <th>培训内容</th>
              <th style="width:100px">是否取证</th>
            </tr>
          </thead>
          <tbody style="border:1px solid #333">
            <tr v-for="(item, index) in tableData" :key="index" style="height:70px;border:1px solid #333">
              <td style="border:0;border-right:1px solid #333;width:100px">{{item.hash.pre_begintime}}</td>
              <td style="border:0">{{item.hash.tcontent}}</td>
              <td style="border:0;border-right:1px solid #333;border-left:1px solid #333">{{item.hash.has_cert}}</td>
            </tr>

          </tbody>
        </table>
      </div>
    </div>
    <!-- <el-dialog :visible.sync="dialogVisible" width="700px">

    </el-dialog> -->
    <el-divider></el-divider>
    <el-table :data="tableData" stripe style="width: 100%">
      <el-table-column align="center" type="index" width="50" v-if="!ischeck"></el-table-column>
      <el-table-column align="center" prop="hash.username" label="培训人员"></el-table-column>
      <el-table-column align="center" prop="hash.pre_begintime" label="培训时间"></el-table-column>
      <el-table-column align="center" prop="hash.tcontent" label="培训内容"></el-table-column>
      <el-table-column align="center" prop="hash.has_cert" label="是否有证"></el-table-column>
    </el-table>
    <el-pagination
      v-if="!ischeck"
      @current-change="handleCurrentChange"
      :currentPage.sync="pagobj.currentPage3"
      :pageSize="pagobj.pagesize"
      layout="total, prev, pager, next"
      :total="pagobj.total"
      style="margin:20px 0;text-align:center"
    ></el-pagination>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false,
      ts: this.newStore(),
      tableData2: [],
    };
  },
  props: {
    tableData: {
      type: Array,
      required: true,
    },
    pagobj: {
      type: Object,
      required: true,
    },
    ischeck: Boolean,
  },
  // created() {
  //   for (let i = 0; i < this.tableData.length; i += 17) {
  //     let arr1 = [];
  //     arr1 = this.tableData.slice(i, i + 17);
  //     this.tableData2.push(arr1);
  //     // console.log(this.tableData2,'456');
  //   }
  // },
  methods: {
    rowStyle({
      row, column, rowIndex, columnIndex,
    }) {
      if (columnIndex !== 0) {
        return 'border-top:1px solid #333;border-left:1px solid #333;';
      }
      return 'border-top:1px solid #333';
    },

    // 修改table header的样式
    tableHeaderColor({
      row, column, rowIndex, columnIndex,
    }) {
      if (rowIndex === 0 && columnIndex !== 2) {
        return 'border-right:1px solid #333';
      }
    },
    handleCurrentChange() {
      this.$parent.getplanlist3();
    },
    doprintsee() {
      this.dialogVisible = true;
    },
    doprint() {
      if (this.tableData.length == 0) {
        this.$message({
          type: 'error',
          message: ' 暂无可打印数据',
        });
        return;
      }
      this.$nextTick(() => {
        const detailContent = document.getElementById('printrecord2');
        Print('#printrecord2');
      });
    },
  },
};
</script>
<style scoped>
.tankuang {
  font-size: 24px;
  font-family: "宋体";
}
.el-table__row {
  height: 60px;
}
table {
  text-align: center;
  padding-left: 30px;
  border-collapse: collapse;
}
table td,
th {
  border: 1px solid #333;
  font-size: 14px;
  height: 40px;
  font-weight: normal
}
</style>
